<!DOCTYPE html>
<html lang="en">
    <head>
  <!-- 元数据 -->
  <meta charset="utf-8">
  <link rel="icon" href="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
  <title>Grid布局的学习记录 | 小崔的博客</title>
  <meta name="author" content="cuishikang" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="format-detection" content="telphone=no, email=no" />
  
    <meta name="keywords" content="Css" />
  
  <meta name="description" content="::: tip 介绍Grid布局的学习记录:::">
<meta property="og:type" content="article">
<meta property="og:title" content="Grid布局的学习记录">
<meta property="og:url" content="https://cuishikang.gitee.io/2022/01/25/css/grid/index.html">
<meta property="og:site_name" content="小崔的博客">
<meta property="og:description" content="::: tip 介绍Grid布局的学习记录:::">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta property="article:published_time" content="2022-01-24T16:00:00.000Z">
<meta property="article:modified_time" content="2022-02-19T10:22:58.555Z">
<meta property="article:author" content="cuishikang">
<meta property="article:tag" content="Css">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta name="twitter:site" content="@null">
  
  <!-- 站点验证相关 -->
  
    
    
    
  
  <!-- 样式表文件 -->
  <link rel="stylesheet" id="kratos-css" href="/css/kratosr.min.css" type="text/css" media="all">
  
    <link rel="stylesheet" id="highlight-css" href="/css/highlight/night-eighties.min.css" type="text/css" media="all">
  
  
  <link rel="stylesheet" id="fontawe-css" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" type="text/css" media="all">
  <link rel="stylesheet" id="nprogress-css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" type="text/css" media="all">
  
  
    <link rel="stylesheet" href="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.css">
  
  
    <link rel="stylesheet" href="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
  
  
    <link rel="stylesheet" id="darkmode-css" href="/css/kr-dark.min.css" type="text/css" media="all">
  
  <!-- 不得不预先加载的一些JS文件 -->
  <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
  
    <script src="https://unpkg.com/qrcode_js@1.0.0/qrcode.min.js"></script>
  
  
  <style>
    
      .kratos-cover.kratos-cover-2 {
        background-image: url('/images/banner.webp');
      }
    
    
      @media(min-width:768px) {
        body.custom-background {
          background-image: url('/images/bg.webp');
        }
      }
    
  </style>
  
<meta name="generator" content="Hexo 6.0.0"></head>


    <body class="custom-background">
        <div id="kratos-wrapper">
    <div id="kratos-page">
        <div id="kratos-header">
            <header id="kratos-desktop-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="nav-header">
                        <nav id="kratos-menu-wrap">
                            <ul id="kratos-primary-menu" class="sf-menu">
                                
                                    
                                        <li><a href="/"><i class="fa fa-home"></i>首页</a></li>
                                    
                                
                                    
                                        <li><a href="/archives/"><i class="fa fa-file"></i>档案馆</a></li>
                                    
                                
                                    
                                        <li><a href="/friends/"><i class="fa fa-paw"></i>好伙伴</a></li>
                                    
                                
                                    
                                        <li>
                                            <a><i class="fa fa-link"></i>关于本人</a>
                                            <ul class="sub-menu">
                                                
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang"><i class="fa fa-git"></i>码云</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang/tmp/raw/master/img/2201645358312_.pic.jpg"><i class="fa fa-weixin"></i>微信</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://www.zhihu.com/people/fu-xi-ting-67-17-5"><i class="fa  fa-search"></i>知乎</a></li>
                                                    
                                                
                                                    
                                                        <li><a href="http://cuishikang.gitee.io/my_resume/#/"><i class="fa  fa-file-o"></i>简历</a></li>
                                                    
                                                
                                            </ul>
                                        </li>
                                    
                                
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <header id="kratos-mobile-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="color-logo"><a href="/">小崔的博客</a></div>
                    <div class="nav-toggle">
                        <a class="kratos-nav-toggle js-kratos-nav-toggle">
                            <i></i>
                        </a>
                    </div>
                </div>
            </header>
        </div>
        <div class="kratos-start kratos-hero-2">
            <!-- <div class="kratos-overlay"></div> -->
            <div class="kratos-cover kratos-cover-2 text-center">
                <div class="desc desc2 animate-box">
                    <a href="/">
                        <h2>小崔的博客</h2> <br />
                        <span></span>
                    </a>
                </div>
            </div>
        </div>

        <div id="kratos-blog-post">
            <div class="container">
                <div id="main" class="row">
                    

        

            <section class="col-md-8">

        

            <article>
    <div class="kratos-hentry kratos-post-inner clearfix">
        <header class="kratos-entry-header">
            
                <h1 class="kratos-entry-title text-center">Grid布局的学习记录</h1>
            
            
            <ul class="kratos-post-meta text-center">
                <li><i class="fa fa-calendar"></i> 2022-01-25</li>
                <li><i class="fa fa-user"></i> 作者 cuishikang</li>
                <li>
                    <i class="fa fa-edit"></i> 
                    
                    
                        ~9.60K
                    
                    字
                </li>
                
            </ul>
        </header>
        <div class="kratos-post-content">
            <div id="expire-alert" class="alert alert-warning hidden" role="alert">
                本文最后编辑于 <time datetime="1645266178555"></time> 前，其中的内容可能需要更新。
            </div>
            
            <hr />
            <p>::: tip 介绍<br>Grid布局的学习记录<br><br>:::</p>
<span id="more"></span>

<h2 id="什么是grid布局"><a href="#什么是grid布局" class="headerlink" title="什么是grid布局"></a>什么是grid布局</h2><ul>
<li>网格布局（Grid）是最强大的 CSS 布局方案。</li>
<li>它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。</li>
</ul>
<blockquote>
<p>grid和flex的区别</p>
</blockquote>
<ul>
<li><code>flex</code>布局是轴线布局，只能指定”项目”针对轴线的位置，可以看作是<strong>一维布局</strong>。<code>grid</code>布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是<strong>二维布局</strong>。<code>grid</code>布局远比 <code>flex</code>布局强大。</li>
<li><code>grid</code>+<code>flex</code>才是顶级之配 <code>flot</code>狗都不用 什么你说ie 不存在的 这是什么浏览器</li>
</ul>
<blockquote>
<p>学习视频</p>
</blockquote>
<ul>
<li>我是在 <a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1Bk4y197xm?from=search&seid=24652100936285353&spm_id_from=333.337.0.0">b站这里</a> 学习的grid布局</li>
</ul>
<h2 id="grid和flex容器和单元格概念"><a href="#grid和flex容器和单元格概念" class="headerlink" title="grid和flex容器和单元格概念"></a>grid和flex容器和单元格概念</h2><ul>
<li><code>grid</code>布局有两个基本概念<ul>
<li>容器(container) 容器的概念就是一个大盒子 里面包裹着项目</li>
<li>单元格(items 、项目) 单元格的概念就是大盒子里面的一个个小盒子 </li>
<li>实际上基本概念和 flex 布局是有一定的相似处</li>
</ul>
</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220124185037060.png" alt="image-20220124185037060"></p>
<h2 id="grid布局的整体介绍"><a href="#grid布局的整体介绍" class="headerlink" title="grid布局的整体介绍"></a>grid布局的整体介绍</h2><ul>
<li><code>grid</code>布局分为 行高 列宽 等等 但是 行高 列宽这俩个是最关键的 <font color=#ff3040>非常重要</font></li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220124172955556.png" alt="image-20220124172955556"></p>
<ul>
<li>我们不光要懂行高列宽的概念 还要懂网格线的概念<ul>
<li>下图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。</li>
</ul>
</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220124173220734.png" alt="image-20220124173220734"></p>
<ul>
<li><font color =#ff3040>注意: </font><ul>
<li>设为网格布局以后，容器子元素（项目）的<code>float</code>、<code>display: inline-block</code>、<code>display: table-cell</code>、<code>vertical-align</code>和<code>column-*</code>等设置都将失效</li>
<li>grid布局只对项目生效，项目只能是容器的一级子元素，子元素并不生效</li>
<li>设置grid布局后 内部单元格不建议使用<code>margin</code>来实现间距 可以使用<code>gap</code>来实现间距 或者使用<code>box-sizing: border-box;</code> + <code>padding</code></li>
</ul>
</li>
</ul>
<h1 id="容器属性-container"><a href="#容器属性-container" class="headerlink" title="容器属性(container)"></a>容器属性(container)</h1><h2 id="grid-template-columns-列宽-grid-template-rows-行高"><a href="#grid-template-columns-列宽-grid-template-rows-行高" class="headerlink" title="grid-template-columns 列宽  grid-template-rows 行高"></a>grid-template-columns 列宽  grid-template-rows 行高</h2><ul>
<li>容器指定了网格布局以后，接着就要划分单元格的行高和列宽 顺序为正序 单元格不设置宽高和其他属性 默认是等分充满整个容器</li>
<li><code>grid-template-columns</code>属性定义每一列的列宽</li>
<li><code>grid-template-rows</code>属性定义每一行的行高</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220124175432720.png" alt="image-20220124175432720"></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: grid;</span><br><span class="line">  <span class="attribute">grid-template-columns</span>: <span class="number">100px</span> <span class="number">100px</span> <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">grid-template-rows</span>: <span class="number">100px</span> <span class="number">100px</span> <span class="number">100px</span> <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>除了使用绝对单位，也可以使用百分比。</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: grid;</span><br><span class="line">  <span class="attribute">grid-template-columns</span>: <span class="number">33.33%</span> <span class="number">33.33%</span> <span class="number">33.33%</span>;</span><br><span class="line">  <span class="attribute">grid-template-rows</span>: <span class="number">33.33%</span> <span class="number">33.33%</span> <span class="number">33.33%</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="repeat-函数复写-常用"><a href="#repeat-函数复写-常用" class="headerlink" title="repeat()函数复写 (常用)"></a><strong>repeat()函数复写 (常用)</strong></h3><ul>
<li>写这么多相同的数 肯定累死了 我们可以通过设置<code>repeat()</code>复写函数 来代替</li>
<li><code>repeat()</code>接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: grid;</span><br><span class="line">  <span class="attribute">grid-template-columns</span>: <span class="built_in">repeat</span>(<span class="number">4</span>,<span class="number">100px</span>);</span><br><span class="line">  <span class="attribute">grid-template-rows</span>: <span class="built_in">repeat</span>(<span class="number">3</span>,<span class="number">100px</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>不止于此，<code>repeat</code>还可以重复某种模式 也就 基数偶数的意思</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">grid-template-columns</span>: <span class="built_in">repeat</span>(<span class="number">3</span>,<span class="number">200px</span> <span class="number">100px</span>); <span class="comment">/** 这句代码定义了6列，分别是200，100，200，100，200，100 **/</span></span><br></pre></td></tr></table></figure>

<h3 id="auto-fill-关键字-不常用"><a href="#auto-fill-关键字-不常用" class="headerlink" title="auto-fill 关键字 (不常用)"></a><strong>auto-fill 关键字 (不常用)</strong></h3><ul>
<li>表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格</li>
<li>当我们只需要确定列宽或者行高，而不用理有多少列时，就可以使用它了 通常列用的很多</li>
<li><font color =#ff3040>注意:  如果你的行<code>grid-template-rows</code>超出了设置的话 会出现挤压</font></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: grid;</span><br><span class="line">	<span class="attribute">grid-template-columns</span>: <span class="built_in">repeat</span>(auto-fill,<span class="number">200px</span>);</span><br><span class="line">    <span class="attribute">grid-template-rows</span>: <span class="built_in">repeat</span>(<span class="number">3</span>,<span class="number">200px</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>当我们只需要确定列宽或者行高，而不用理有多少列时，就可以使用它了</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/20210509220842447.gif" alt="img"></p>
<h3 id="fr关键字-常用"><a href="#fr关键字-常用" class="headerlink" title="fr关键字 (常用)"></a><strong>fr关键字 (常用)</strong></h3><ul>
<li><code>fr</code> 单位代表网格容器中可用空间的一等份(类似于<code>flex:1</code> <code>flex:2</code> 、百分比) 相比传统的px 具备了自适应性</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: grid;</span><br><span class="line">    <span class="attribute">grid-template-columns</span>: <span class="number">200px</span> <span class="number">1</span>fr <span class="number">2</span>fr ; <span class="comment">/** 左侧固定200px 中间1fr 右侧2fr **/</span></span><br><span class="line">    <span class="attribute">grid-template-rows</span>: <span class="built_in">repeat</span>(<span class="number">3</span>,<span class="number">200px</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>表示第一个列宽设置为 <code>200px</code>，后面剩余的宽度分为两部分，第二给项目占<code>1/3</code>，第三个项目占<code>2/3</code></li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/20210509220920257.gif" alt="在这里插入图片描述"></p>
<h3 id="minmax-关键字-常用"><a href="#minmax-关键字-常用" class="headerlink" title="minmax()关键字 (常用)"></a><strong>minmax()关键字 (常用)</strong></h3><ul>
<li><code>minmax()</code> 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值</li>
<li>也就是说最大不会超过最大值，最小不能小过最小值 可以把他理解为 <code>min-width</code>  <code>max-width</code></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: grid;</span><br><span class="line">    <span class="attribute">grid-template-columns</span>: <span class="number">200px</span> <span class="number">1</span>fr <span class="built_in">minmax</span>(<span class="number">400px</span>,<span class="number">1</span>fr); <span class="comment">/** 列宽不小于400px，不大于1fr **/</span></span><br><span class="line">    <span class="attribute">grid-template-rows</span>: <span class="built_in">repeat</span>(<span class="number">3</span>,<span class="number">200px</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>minmax(400px,1fr)</code>表示列宽不小于<code>400px</code>，不大于<code>1fr</code></li>
</ul>
<p><img src="https://img-blog.csdnimg.cn/20210509220939349.gif#pic_center" alt="在这里插入图片描述"></p>
<h3 id="auto关键字-常用"><a href="#auto关键字-常用" class="headerlink" title="auto关键字 (常用)"></a><strong>auto关键字 (常用)</strong></h3><ul>
<li>设置<code>auto</code>后，将由浏览器自行决定长度，尽可能的会占满剩余空间，除非有其他设置，例如有<code>min-width</code>之类的</li>
<li>利用这个关键字，我们可以轻易实现三列或者两列布局。</li>
<li><font color =#ff3040>注意: 如果你要实现三列布局 左右两侧的单元格就不要使用<code>fr</code> 他会导致你设置<code>auto</code>的单元格默认为内容宽度 而且不要设置复写函数<code>repeat()</code></font></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: grid;</span><br><span class="line">	<span class="attribute">grid-template-columns</span>: <span class="number">200px</span> auto <span class="number">200px</span>;</span><br><span class="line">	<span class="attribute">grid-template-rows</span>: <span class="built_in">repeat</span>(<span class="number">3</span>,<span class="number">200px</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>如果中间那列设置了<code>auto</code>，两侧写死<code>px</code> 这样就实现了简单中间自适应的三栏布局(圣杯?)</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/20210509220954600.gif" alt="在这里插入图片描述"></p>
<h3 id="网格线"><a href="#网格线" class="headerlink" title="网格线"></a><strong>网格线</strong></h3><ul>
<li>grid布局叫做网格布局，那自然少不了网格线的存在，使用方括号，指定每一根网格线的名字，方便以后的做定位时使用 </li>
<li>没有实际的作用 只是一个辅助属性方便定位使用</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: grid;</span><br><span class="line">    <span class="attribute">grid-template-columns</span>: [c1] <span class="number">200px</span> [c2] auto [c3] <span class="number">200px</span> [c4];</span><br><span class="line">	<span class="attribute">grid-template-rows</span>:  [r1] <span class="number">200px</span> [r2] auto [r3] <span class="number">200px</span> [r4];</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>就像这样定义了一个<code>3*3</code>的网格区域，就需要有4条水平线，4条垂直线</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/20210509221018381.png" alt="在这里插入图片描述"></p>
<h2 id="gap-网格间距"><a href="#gap-网格间距" class="headerlink" title="gap 网格间距"></a>gap 网格间距</h2><ul>
<li>这个是设置每个单元格的边距 包括他的 行间距 列间距</li>
<li><code>row-gap</code>属性设置行与行的间隔（行间距），<code>column-gap</code>属性设置列与列的间隔（列间距）。</li>
<li><font color =#ff3040>注意：在很多的博客中采用的都是带有<code>grid</code>前缀的方式，目前这种定义网格间距的方式已经被废弃了，所以还是尽量采用这种写法</font></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: grid;</span><br><span class="line">  <span class="attribute">grid-template-columns</span>: <span class="number">200px</span> auto <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">grid-template-rows</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">  <span class="attribute">gap</span>: <span class="number">10px</span> <span class="number">20px</span>; <span class="comment">/** 行间距 列间距 **/</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li>在这段代码中定义了行间距为<code>10px</code>，列间距为<code>10px</code>，也可以采用合并属性<code>gap</code>来写<code>gap: 10px 10px</code>的意思和上面相同，第一个参数是行间距，第二个是列间距</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220125093225454.png" alt="image-20220125093225454"></p>
<h2 id="grid-template-areas-定义单元格区域"><a href="#grid-template-areas-定义单元格区域" class="headerlink" title="grid-template-areas 定义单元格区域"></a>grid-template-areas 定义单元格区域</h2><ul>
<li>用于定义区域，一个区域由一个或者多个单元格组成 这个需要配合单元格的<code>grid-area</code>指定区域的属性</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: grid;</span><br><span class="line">  <span class="attribute">grid-template-columns</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">  <span class="attribute">grid-template-rows</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">  <span class="attribute">grid-template-areas</span>: <span class="string">&#x27;a b c&#x27;</span> <span class="string">&#x27;d e f&#x27;</span> <span class="string">&#x27;g h i&#x27;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>上面的代码划分出了9个单元格，然后将其命名为<code>a~i</code>的9个区域，分别对应9个单元格</li>
</ul>
<blockquote>
<p>合并成一个区域</p>
</blockquote>
<ul>
<li>我们也可以将多个单元格合并成一个区域</li>
<li><font color = #ff3040>注意: 如果一整块区域都是<code>a a a</code> 也不可能简写为<code>a</code> 一定要按照单元格的数量来设置 不可简写少写</font></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: grid;</span><br><span class="line">  <span class="attribute">grid-template-columns</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">  <span class="attribute">grid-template-rows</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">  <span class="attribute">grid-template-areas</span>: <span class="string">&#x27;a a a&#x27;</span> <span class="string">&#x27;b b b&#x27;</span> <span class="string">&#x27;c c c&#x27;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>上面的代码中将9个单元格划分成了<code>a,b,c,d</code>4个区域</li>
</ul>
<blockquote>
<p>举个例子</p>
</blockquote>
<ul>
<li>在我们常见的布局中</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/2021050922104438.png" alt="在这里插入图片描述"></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">grid-template-areas</span>: <span class="string">&#x27;header header header&#x27;</span> </span><br><span class="line">					 <span class="string">&#x27;nav nav nav&#x27;</span> </span><br><span class="line">					 <span class="string">&#x27;article article aside&#x27;</span></span><br><span class="line">					 <span class="string">&#x27;footer footer footer&#x27;</span>;</span><br></pre></td></tr></table></figure>

<ul>
<li>像上面的代码中，我们就划分成功了 然后我们可以继续学习如何去单独操作他们</li>
</ul>
<blockquote>
<p>其他事项</p>
</blockquote>
<ul>
<li>如果你不想给容器里的单元格起名字 可以用 <code>.</code>代替 如:<code> &#39;nav . nav&#39;</code></li>
<li><font color =#ff3040>注意：区域的命名会影响到网格线的名字，对于区域<code>aside</code>它的起始线叫做<code>aside-start</code>，结束线叫做<code>aside-end</code></font> 不理解没关系 反正用不到 老老实实给他起名字就行 别少写或者简写</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/20210509221057248.png" alt="在这里插入图片描述"></p>
<h2 id="grid-auto-flow-容器内单元格排列方式"><a href="#grid-auto-flow-容器内单元格排列方式" class="headerlink" title="grid-auto-flow 容器内单元格排列方式"></a>grid-auto-flow 容器内单元格排列方式</h2><ul>
<li>划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是”先行后列”，即先填满第一行，再开始放入第二行，即下图数字的顺序。</li>
<li>这个顺序由<code>grid-auto-flow</code>属性决定，默认值是<code>row</code>，即”先行后列”。也可以将它设成<code>column</code>，变成”先列后行”。</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: grid;</span><br><span class="line">  <span class="attribute">grid-template-columns</span>: <span class="number">200px</span> auto <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">grid-template-rows</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">  <span class="attribute">grid-auto-flow</span>: column; <span class="comment">/** 盒子的排列顺序变成了先列后行 **/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220125094534638.png" alt="image-20220125094534638"></p>
<blockquote>
<p>自动密集排列</p>
</blockquote>
<ul>
<li>假设当我调整我们的代码将某一个项目拉长时，会有这一行放不下的情况，就像图片左边这个场景一样，第6个项目因为太长了放不上去，那个位置被空出来了，我们可以尝试使用。</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: grid;</span><br><span class="line">  <span class="attribute">grid-template-columns</span>: <span class="number">200px</span> auto <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">grid-template-rows</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">  <span class="attribute">grid-auto-flow</span>: row dense;<span class="comment">/** 自动密集排列 **/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>在实际应用中，我们可能想让下面长度合适的填满这个空白，这个时候可以设置 <code>grid-auto-flow: row dense</code>，表示尽可能填满表格</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220125095302037.png" alt="image-20220125095302037"></p>
<h2 id="容器内容排列方式-center"><a href="#容器内容排列方式-center" class="headerlink" title="容器内容排列方式 center"></a>容器内容排列方式 center</h2><ul>
<li>容器内容排列方式 分为两种<ul>
<li>单元格的排列方式</li>
<li>容器的排列方式</li>
</ul>
</li>
</ul>
<h3 id="单元格的排列方式"><a href="#单元格的排列方式" class="headerlink" title="单元格的排列方式"></a><strong>单元格的排列方式</strong></h3><ul>
<li><p>这个是设置容器内所有单元格的排序方式 整体全部设置一直的排列</p>
</li>
<li><p><code>justify-items</code> 属性设置单元格内容的水平位置（左中右），<code>align-items</code> 属性设置单元格的垂直位置（上中下）</p>
</li>
<li><p>实际上这个跟<code>flex</code>布局是一样的</p>
<ul>
<li>start：对齐单元格的起始边缘。</li>
<li>end：对齐单元格的结束边缘。</li>
<li>center：单元格内部居中。</li>
<li>stretch：拉伸，占满单元格的整个宽度（默认值）。<ul>
<li>简写: <code>place-items: 水平位置 垂直位置;</code></li>
</ul>
</li>
</ul>
</li>
<li><p><font color =#ff3040>注意: 如果你的单元格没有设置宽度 当你设置排列方式的时候 宽度会变成默认的宽度</font></p>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: grid;</span><br><span class="line">  <span class="attribute">grid-template-columns</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">  <span class="attribute">grid-template-rows</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">  justify-items: center; <span class="comment">/** 水平 **/</span></span><br><span class="line">  <span class="attribute">align-items</span>: center; <span class="comment">/** 垂直 **/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220125101012269.png" alt="image-20220125101012269"></p>
<ul>
<li>当然你可以简写 ( 垂直 水平 )</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">place-items: align-items justify-items;</span><br></pre></td></tr></table></figure>

<h3 id="内容区域的排列方式"><a href="#内容区域的排列方式" class="headerlink" title="内容区域的排列方式"></a><strong>内容区域的排列方式</strong></h3><ul>
<li>如果整个容器想要垂直水平居中呢 这里就需要用到 <code>justify-content</code>属性是定义整个内容区域在容器里面的水平位置（左中右），<code>align-content</code>属性是定义整个内容区域的垂直位置（上中下）</li>
<li>实际上这个跟<code>flex</code>布局是一样的<ul>
<li>align-content: <code>stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;</code></li>
<li>justify-content:<code> flex-start|flex-end|center|space-between|space-around|initial|inherit;</code></li>
</ul>
</li>
<li>他没有简写属性</li>
</ul>
<blockquote>
<p>具体实例</p>
</blockquote>
<ul>
<li>设置 垂直方向 <code>align-content</code></li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/2021050922131762.png" alt="在这里插入图片描述"></p>
<ul>
<li>设置 水平方向 <code>justify-content</code></li>
<li>content-stretch ：项目大小没有指定时，拉伸占据整个网格容器。</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/20210509221345622.png" alt="在这里插入图片描述"></p>
<ul>
<li>space-around ：两侧的边距相等。因此，项目之间的边距比项目与容器边框的边距大一倍</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/20210509221359587.png" alt="在这里插入图片描述"></p>
<ul>
<li>space-between ：项目与项目的边距相等，两侧没有边距。</li>
</ul>
<p><img src="https://img-blog.csdnimg.cn/20210509221411475.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUwODU1ODcy,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul>
<li>space-evenly ：两侧有间距 并且中间和两侧边距一致 全部等分</li>
</ul>
<p><img src="https://img-blog.csdnimg.cn/20210509221423360.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUwODU1ODcy,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<h2 id="设置多出的网格-隐式网格"><a href="#设置多出的网格-隐式网格" class="headerlink" title="设置多出的网格(隐式网格)"></a>设置多出的网格(隐式网格)</h2><ul>
<li>对于网格有显式网格和隐式网格，显示网格通过<code>grid-template-columns</code> 和 <code>grid-template-rows</code> 属性中定义的行和列，当实际行数或者列数大于设置的行列数时，就会有多余的网格，这些网格的宽高通过<code>grid-auto-columns</code>和<code>grid-auto-rows</code>属性来设置</li>
</ul>
<blockquote>
<p>举个例子</p>
</blockquote>
<ul>
<li>比如我有10个单元格 但我的列和行只设置了3x3 那么多出的单元格我想单独设置 就需要用到这个属性</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220125104637447.png" alt="image-20220125104637447"></p>
<ul>
<li>我想给10号盒子设置他的列宽和行高</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: grid;</span><br><span class="line">  <span class="attribute">grid-template-columns</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">  <span class="attribute">grid-template-rows</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">  <span class="attribute">grid-auto-columns</span>: <span class="number">200px</span>; <span class="comment">/** 设置列宽 **/</span></span><br><span class="line">  <span class="attribute">grid-auto-rows</span>: <span class="number">200px</span>; <span class="comment">/** 设置行高 **/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220125104835733.png" alt="image-20220125104835733"></p>
<blockquote>
<p>图文详解</p>
</blockquote>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/20210509221441356.png" alt="在这里插入图片描述"></p>
<h1 id="单元格属性-项目-items"><a href="#单元格属性-项目-items" class="headerlink" title="单元格属性(项目 items)"></a>单元格属性(项目 items)</h1><h2 id="指定单元格的列宽行高"><a href="#指定单元格的列宽行高" class="headerlink" title="指定单元格的列宽行高"></a>指定单元格的列宽行高</h2><ul>
<li>如果我们想给单元格等比设置列宽行高怎么办呢</li>
<li>实现的原理是通过网格线 来设置单元格<ul>
<li><code>grid-column-start</code>属性：左边框所在的垂直网格线</li>
<li><code>grid-column-end</code>属性：右边框所在的垂直网格线<ul>
<li>简写: <code>grid-column: 左边 右边 </code></li>
</ul>
</li>
<li><code>grid-row-start</code>属性：上边框所在的水平网格线</li>
<li><code>grid-row-end</code>属性：下边框所在的水平网格线<ul>
<li>简写: <code>grid-row: 上边 下边</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<blockquote>
<p>举个例子</p>
</blockquote>
<ul>
<li>我们设置一个3x3的grid单元格布局</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: grid;</span><br><span class="line">  <span class="attribute">grid-template-columns</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">  <span class="attribute">grid-template-rows</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220125114253237.png" alt="image-20220125114253237"></p>
<ul>
<li>然后我们想把1号单元格设置成两行两行<ul>
<li><font color =#ff3040>注意: 必须用 <code>/</code> 分割 不可以用空格代替 <code>/</code>不是除号的意思，仅是占位的作用</font></li>
<li>如果只写一个数字的话，默认跨越1个网格</li>
</ul>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: grid;</span><br><span class="line">  <span class="attribute">grid-template-columns</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">  <span class="attribute">grid-template-rows</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/** 设置成三列两行 **/</span></span><br><span class="line"><span class="selector-class">.item-1</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#55efc4</span>;</span><br><span class="line">  <span class="attribute">grid-column</span>: <span class="number">1</span> / <span class="number">3</span>; <span class="comment">/** 设置他的列宽 从网格线1到网格线3 也就是到横着第二个单元格的右侧 **/</span></span><br><span class="line">  <span class="attribute">grid-row</span>: <span class="number">1</span> / <span class="number">3</span>;  <span class="comment">/** 设置他的行高 从网格线1到网格线3 也就是到竖着第二个单元格的底部 **/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>图文详解</p>
</blockquote>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220125115422843.png" alt="image-20220125115422843"></p>
<ul>
<li>我们还可以通过<code>span</code>关键字，来实现占2个网格这样的效果，可以将它理解为跨越的意思</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: grid;</span><br><span class="line">  <span class="attribute">grid-template-columns</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">  <span class="attribute">grid-template-rows</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.item-1</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#55efc4</span>;</span><br><span class="line">  <span class="comment">/** grid-row: 1 / 3; **/</span> </span><br><span class="line">  <span class="comment">/** grid-column: 1 / 3; **/</span>  </span><br><span class="line">  <span class="attribute">grid-row</span>: span <span class="number">2</span>; <span class="comment">/** 和1 / 3是相同的意思 设置两个行高 **/</span></span><br><span class="line">  <span class="attribute">grid-column</span>: span <span class="number">2</span>; <span class="comment">/** 和1 / 3是相同的意思 设置两个列宽 **/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="指定单元格的区域-grid-area"><a href="#指定单元格的区域-grid-area" class="headerlink" title="指定单元格的区域 grid-area"></a>指定单元格的区域 grid-area</h2><ul>
<li>在前面容器属性讲过<code>grid-template-areas</code>定义区域属性，当时只是知道了怎么划分区域，现在<code>grid-area</code>属性就是怎么把项目指定给区域</li>
</ul>
<blockquote>
<p>举个例子</p>
</blockquote>
<ul>
<li>假设我们设置一个3x3的grid单元格布局 并且用<code>grid-template-areas</code>定义了区域属性</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: grid;</span><br><span class="line">  <span class="attribute">grid-template-columns</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">  <span class="attribute">grid-template-rows</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">  <span class="attribute">grid-template-areas</span>: <span class="string">&#x27;a a a&#x27;</span> <span class="string">&#x27;b b b&#x27;</span> <span class="string">&#x27;ccc&#x27;</span>; <span class="comment">/** 3x3的盒子给他分配指定的区域**/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>那么实际上这个区域的单元格是这样分的</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220125133755848.png" alt="image-20220125133755848"></p>
<ul>
<li>那我通过<code>grid-area</code>属性 让单元格1 设置到b区域(中间)</li>
<li><font color =#ff3040>注意: grid-area 设置区域的时候 不要带<code>&#39;&#39;</code> 如果你的区域都相同的 比如<code>b b b</code> 那么他会占用一块<code>b</code>的区域</font></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: grid;</span><br><span class="line">  <span class="attribute">grid-template-columns</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">  <span class="attribute">grid-template-rows</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">  <span class="attribute">grid-template-areas</span>: <span class="string">&#x27;a a a&#x27;</span> <span class="string">&#x27;b b b&#x27;</span> <span class="string">&#x27;c c c&#x27;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.item-1</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#55efc4</span>;</span><br><span class="line">  <span class="attribute">grid-area</span>: b;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220125134331044.png" alt="image-20220125134331044"></p>
<blockquote>
<p>图文详解</p>
</blockquote>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220125134538970.png" alt="image-20220125134538970"></p>
<h2 id="指定单元格内容排列方式-单个"><a href="#指定单元格内容排列方式-单个" class="headerlink" title="指定单元格内容排列方式(单个)"></a>指定单元格内容排列方式(单个)</h2><ul>
<li>容器可以通过<code>align-items</code>和<code>justify-items</code> 设置容器内所有单元格的排列 但是如何只设置容器中的单独一个单元格呢 <code>self</code>这个单词就是自身的意思<ul>
<li><code>justify-self</code>属性设置单元格内容的水平位置（左中右），跟<code>justify-items</code>属性的用法完全一致，但只作用于单个项目。</li>
<li><code>align-self</code>属性设置单元格内容的垂直位置（上中下），跟<code>align-items</code>属性的用法完全一致，也是只作用于单个项目。</li>
<li>属性值：<code>start | end | center | stretch</code><ul>
<li>简写: <code>place-self: 水平位置 垂直位置;</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<blockquote>
<p>举个例子</p>
</blockquote>
<ul>
<li>我想把容器里的单元格3设置为垂直水平居中 但不影响其他人</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: grid;</span><br><span class="line">  <span class="attribute">grid-template-columns</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">  <span class="attribute">grid-template-rows</span>: <span class="built_in">repeat</span>(<span class="number">3</span>, <span class="number">200px</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.item-3</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#74b9ff</span>;</span><br><span class="line">  <span class="attribute">align-self</span>: center; <span class="comment">/** 设置单元格3垂直居中 **/</span></span><br><span class="line">  justify-self: center; <span class="comment">/** 设置单元格3水平居中 **/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220125140701793.png" alt="image-20220125140701793"></p>
<ul>
<li>当然也可以简写 ( 垂直 水平 )</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">place-self: align-self justify-self;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>图文详解</p>
</blockquote>
<ul>
<li>设置 垂直方向 <code>align-self</code></li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/20210509221605738.png" alt="在这里插入图片描述"></p>
<ul>
<li>设置 水平方向 <code>justify-self</code></li>
</ul>
<p><img src="https://img-blog.csdnimg.cn/20210509221555847.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUwODU1ODcy,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><ul>
<li><a target="_blank" rel="noopener" href="https://blog.csdn.net/m0_50855872/article/details/116571697?spm=1001.2014.3001.5502">图解CSS布局（一）- Grid布局</a></li>
</ul>

        </div>
        
            <div class="kratos-copyright text-center clearfix">
                <h5>本作品采用 <a rel="license nofollow" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
            </div>
        
        <footer class="kratos-entry-footer clearfix">
            
                <div class="post-like-donate text-center clearfix" id="post-like-donate">
                
                
                    <a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
                    <div class="share-wrap" style="display: none;">
    <div class="share-group">
        <a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-qq"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-star"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weixin"></i>
            </div>
            <div class="share-int">
                <div class="qrcode" id="wechat-qr"></div>
                <p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weibo"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-facebook"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-twitter"></i>
            </div>
        </a>
    </div>
    <script type="text/javascript">
        $(()=>{
            new QRCode("wechat-qr", {
                text: "https://cuishikang.gitee.io/2022/01/25/css/grid/",
                width: 150,
                height: 150,
                correctLevel : QRCode.CorrectLevel.H
            });
        });
        function share(dest) {
            const qqBase        = "https://connect.qq.com/widget/shareqq/index.html?";
            const weiboBase     = "https://service.weibo.com/share/share.php?";
            const qzoneBase     = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
            const facebookBase  = "https://www.facebook.com/sharer/sharer.php?";
            const twitterBase   = "https://twitter.com/intent/tweet?";
            const hostUrl       = "https://cuishikang.gitee.io/2022/01/25/css/grid/";
            const title         = "「Grid布局的学习记录」";
            const excerpt       = `::: tip 介绍Grid布局的学习记录:::`;
            let _URL;
            switch (dest) {
                case "qq"       : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";     break;
                case "weibo"    : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt;                                 break;
                case "qzone"    : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";  break;
                case "facebook" : _URL = facebookBase+"u="+hostUrl;                                                        break;
                case "twitter"  : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl;                                break;
            }
            window.open(_URL);
        };
    </script>
</div>
                
                </div>
            
            <div class="footer-tag clearfix">
                <div class="pull-left">
                <i class="fa fa-tags"></i>
                    <a class="tag-none-link" href="/tags/Css/" rel="tag">Css</a>
                </div>
                <div class="pull-date">
                <span>最后编辑：2022-02-19</span>
                </div>
            </div>
        </footer>
    </div>
    
        <nav class="navigation post-navigation clearfix" role="navigation">
            
            <div class="nav-previous clearfix">
                <a title=" flex布局属性简介" href="/2022/01/25/css/flex/">&lt; 上一篇</a>
            </div>
            
            
            <div class="nav-next clearfix">
                <a title=" 一些常用的css样式" href="/2022/01/25/css/css_other/">下一篇 &gt;</a>
            </div>
            
        </nav>
    
    
</article>

        

            </section>

        

                
            

<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
    <!-- 文章和页面根据splitter来分割，没有的话就从头开始设置为sticky -->
    
    
                <aside id="krw-about" class="widget widget-kratos-about clearfix">
    <div class="photo-background"></div>
    <div class="photo-wrapper clearfix">
        <div class="photo-wrapper-tip text-center">
            <img class="about-photo" src="https://gitee.com/cuishikang/tmp/raw/master/img/20220220194141.png" />
        </div>
    </div>
    <div class="textwidget">
        <p class="text-center"></p>
    </div>
    <div class="site-meta">
        <a class="meta-item" href="/archives/">
            <span class="title">
                文章
            </span>
            <span class="count">
                91
            </span>
        </a>
        <a class="meta-item" href="/categories/">
            <span class="title">
                分类
            </span>
            <span class="count">
                13
            </span>
        </a>
        <a class="meta-item" href="/tags/">
            <span class="title">
                标签
            </span>
            <span class="count">
                33
            </span>
        </a>
    </div>
</aside>
            
                    <div class="sticky-area">
                
                
  <aside id="krw-categories" class="widget widget-kratos-categories clearfix">
    <h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Css/">Css</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/RABC/">RABC</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vscode/">Vscode</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a><span class="category-list-count">13</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/">Vue3</a><span class="category-list-count">25</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue%E7%A7%BB%E5%8A%A8%E5%A4%B4%E6%9D%A1%E9%A1%B9%E7%9B%AE/">Vue移动头条项目</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/animation/">animation</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/axios/">axios</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/other/">other</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/uniapp/">uniapp</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue-element-admin/">vue-element-admin</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/">小程序</a><span class="category-list-count">2</span></li></ul>
  </aside>


            
                
  <aside id="krw-tags" class="widget widget-kratos-tags clearfix">
    <h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
      <div class="tag-clouds">
        <a href="/tags/Css/" style="font-size: 0.66em;">Css</a> <a href="/tags/H5Video/" style="font-size: 0.6em;">H5Video</a> <a href="/tags/JavaScript/" style="font-size: 0.74em;">JavaScript</a> <a href="/tags/My-project/" style="font-size: 0.6em;">My project</a> <a href="/tags/QQ/" style="font-size: 0.6em;">QQ</a> <a href="/tags/RABC/" style="font-size: 0.6em;">RABC</a> <a href="/tags/Vant/" style="font-size: 0.71em;">Vant</a> <a href="/tags/VeeValidate/" style="font-size: 0.6em;">VeeValidate</a> <a href="/tags/Vscode/" style="font-size: 0.6em;">Vscode</a> <a href="/tags/Vue/" style="font-size: 0.8em;">Vue</a> <a href="/tags/Vue-Router/" style="font-size: 0.6em;">Vue Router</a> <a href="/tags/Vue3/" style="font-size: 0.77em;">Vue3</a> <a href="/tags/Vuex/" style="font-size: 0.6em;">Vuex</a> <a href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 0.74em;">Vue移动端</a> <a href="/tags/Windows/" style="font-size: 0.6em;">Windows</a> <a href="/tags/animation/" style="font-size: 0.63em;">animation</a> <a href="/tags/axios/" style="font-size: 0.69em;">axios</a> <a href="/tags/echarts/" style="font-size: 0.6em;">echarts</a>
      </div>
  </aside>

            
                
  <aside id="krw-posts" class="widget widget-kratos-posts">
  <h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
  <div class="tab-content">
      <ul class="list-group">
        
        
          
          
            <a class="list-group-item" href="/2111/02/19/JavaScript/5_algorithm_tree/"><i class="fa  fa-book"></i> JavaScript树形数据转换算法</a>
            
          
        
          
          
            <a class="list-group-item" href="/2099/01/27/Vue3/1.1.1_Vue_study/"><i class="fa  fa-book"></i> Vue3 学习手册(博客版)</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/28/JavaScript/0.2_scroll/"><i class="fa  fa-book"></i> JS 滚动到指定位置和回到顶部</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/23/Vue/5_Vue_nextTick/"><i class="fa  fa-book"></i> 理解$nextTick</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/20/hello-world/"><i class="fa  fa-book"></i> Hello World</a>
            
          
        
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
      </ul>
  </div>
  </aside>

            
    </div>
</section>
        
        </div>
    </div>
</div>
<footer>
    <div id="footer"  class="ap-lrc"  >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 footer-list text-center">
                    <ul class="kratos-social-icons">
                        
                        
                        <li><a target="_blank" rel="nofollow" href="https://t.me/CandyUnion"><i class="fa fa-telegram"></i></a></li>
                        
                        
                        
                        <li><a target="_blank" rel="me" href="https://nya.one/@Candinya"><i class="fa fa fa-share-alt-square"></i></a></li>
                        <li><a target="_blank" rel="nofollow" href="https://github.com/Candinya"><i class="fa fa-github"></i></a></li>
                        
                    </ul>
                    <ul class="kratos-copyright">
                        <div>
                            <li>&copy; 2022 小崔的博客 版权所有.</li>
                            <li>本站已运行<span id="span_dt">Loading...</span></li>
                        </div>
                        <div>
                            <li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
                            <li>Site built with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by cuishikang.</li>
                        </div>
                        <div>
                            <li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
                            <li>Hosted on <a href="https://github.io" target="_blank">Github Pages</a></li>
                        </div>
                        <div>
                            
                            
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="kr-tool text-center">
            <div class="tool">
                
                    <div class="box search-box">
                        <a href="/search/">
                            <span class="fa fa-search"></span>
                        </a>
                    </div>
                
                
                    <div class="box theme-box" id="darkmode-switch">
                        <span class="fa fa-adjust"></span>
                    </div>
                
                
            </div>
            <div class="box gotop-box">
                <span class="fa fa-chevron-up"></span>
            </div>
        </div>
    </div>
</footer>
</div>
</div>

        <script defer src="https://unpkg.com/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script>
    if (!window.kr) {
        window.kr = {};
    }
    window.kr.notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));
    window.kr.siteRoot = "/";
</script>


    <script async src="/js/candy.min.js"></script>



    <script defer src="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
    
    <script defer src="https://unpkg.com/meting@2/dist/Meting.min.js"></script>
    <meting-js
        server="netease"
        type="song"
        id="1375305989"
        order="random"
        fixed="true"
    >
    </meting-js>



    <script defer src="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script defer src="https://unpkg.com/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script defer src="/js/kratosr.min.js"></script>
<script defer src="/js/pjax.min.js"></script>


    <script defer src="/js/kr-dark.min.js"></script>



<!-- Extra support for third-party plguins  -->


    </body>
</html>